@import '@/styles/color.less';
@import '@/styles/token.less';

.appDev {
  // AppDev 页面根容器样式
  min-height: 600px;
  min-width: 1200px;
}

.container {
  color: @colorTextBase;
  background-image: @backgroundImage;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: background-image 0.3s ease;

  .title-style {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: @colorText;
  }

  .edit-content {
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .section {
    // gap: 20px;
    overflow-x: auto;
    border-radius: @pageContainerBorderRadius;
    border: @lineWidth solid @colorSplit;
    margin: 0 @marginSm @marginSm;
    background-color: @colorBgContainer;
  }

  :global {
    // 风格2的适配
    .xagi-nav-style2 {
      margin: 0;
      border-radius: 0;
    }
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 主布局行
.mainRow {
  width: 100%;
  margin: 0 !important;
  color: @colorTextBase;
  display: flex;
  flex-direction: row;
  height: 100%;
}

// 左侧AI助手面板
.leftPanel {
  width: 360px;
  height: 100%;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-right: 1px solid rgba(0, 0, 0, 10%);
  padding: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 10%);
  flex-shrink: 0; // 防止收缩
}

// 右侧代码编辑器区域
.rightPanel {
  flex: 1; // 占据剩余空间
  height: 100%;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 工具栏
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 80%);
  border-bottom: 1px solid rgba(0, 0, 0, 10%);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 5%);
}

// 版本控制
.versionControl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}

.versionButton {
  background: rgba(255, 255, 255, 90%);
  border: 1px solid rgba(0, 0, 0, 10%);
  color: @colorTextBase;

  &:hover {
    background: rgba(0, 0, 0, 5%);
    border-color: rgba(0, 0, 0, 20%);
    color: @colorTextBase;
  }
}

.toolbarLeft {
  display: flex;
  align-items: center;
  color: @colorTextBase;
}

.toolbarRight {
  display: flex;
  align-items: center;
  color: @colorTextBase;
}

// 工具栏按钮样式
.toolbarButton {
  background: rgba(255, 255, 255, 90%);
  border: 1px solid rgba(0, 0, 0, 10%);
  color: @colorTextBase;

  &:hover {
    background: rgba(0, 0, 0, 5%);
    border-color: rgba(0, 0, 0, 20%);
    color: @colorTextBase;
  }

  &:disabled {
    background: rgba(0, 0, 0, 5%);
    border-color: rgba(0, 0, 0, 10%);
    color: @colorTextDisabled;
  }
}

// 内容区域
.contentArea {
  flex: 1;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.contentRow {
  display: flex;
  flex-direction: row;
  height: 100%;
  margin: 0 !important;
  gap: 0;
}

// 编辑器列
.editorCol {
  flex: 1; // 占据剩余空间
  height: 100%;
  padding: 0;
  min-width: 0; // 允许收缩
}

// 编辑器容器
.editorContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  // border-radius: 8px;
  overflow: hidden;
  // box-shadow: 0 1px 3px rgba(0, 0, 0, 10%);
  position: relative;
}

// 编辑器头部bar
.editorHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 95%);
  border-bottom: 1px solid rgba(0, 0, 0, 10%);
  padding: 8px 12px;
  position: relative;
  z-index: 10;
}

.editorHeaderLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.editorHeaderRight {
  display: flex;
  align-items: center;
  gap: 4px; // 增加间距以适应更多按钮
}

// 预览状态信息样式
.previewStatusInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;

  .previewTitle {
    font-size: 14px;
    font-weight: 500;
    color: @colorTextBase;
  }

  .statusBadge {
    font-size: 12px;
    color: @colorSuccess;
    background: @colorSuccessBg;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid @colorSuccessBorder;
  }

  .loadingBadge {
    font-size: @fontSizeSm;
    color: @colorWarning;
    background: @colorWarningBg;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid @colorWarningBorder;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

// 版本选择器按钮样式
.versionDropdownButton {
  min-width: 60px;
  padding: 6px 12px;
  font-size: @fontSizeSm;
  border-radius: 8px;
  margin-right: 16px;
}

// Segmented组件样式
.segmentedTabs {
  // 使用默认样式，自定义样式已注释
  display: block;
  // :global(.ant-segmented) {
  //   background: rgba(248, 250, 252, 80%);
  //   border: 1px solid rgba(0, 0, 0, 10%);
  //   border-radius: 8px;
  //   padding: 3px;
  //   box-shadow: 0 1px 2px rgba(0, 0, 0, 5%);
  // }

  // :global(.ant-segmented-item) {
  //   color: #64748b;
  //   border: none;
  //   background: transparent;
  //   padding: 6px 12px;
  //   min-width: 36px;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   border-radius: 4px;
  //   transition: all 0.2s ease;

  //   &:hover {
  //     color: #1e293b;
  //     background: rgba(0, 0, 0, 5%);
  //   }

  //   &.ant-segmented-item-selected {
  //     color: #fff;
  //     background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  //     box-shadow: 0 2px 4px rgba(59, 130, 246, 30%);
  //   }
  // }

  :global(.ant-segmented-item-label) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 编辑器内容区域
.editorContent {
  flex: 1;
  height: calc(100vh - 120px);
  overflow: hidden;
}

// 响应式设计
// @media (max-width: 1400px) {
//   .leftPanel {
//     flex: 0 0 35%;
//     max-width: 35%;
//   }

//   .rightPanel {
//     flex: 0 0 65%;
//     max-width: 65%;
//   }
// }

// @media (max-width: 1200px) {
//   .leftPanel {
//     flex: 0 0 40%;
//     max-width: 40%;
//   }

//   .rightPanel {
//     flex: 0 0 60%;
//     max-width: 60%;
//   }
// }

// @media (max-width: 768px) {
//   .mainRow {
//     flex-direction: column;
//   }

//   .leftPanel {
//     height: 40vh;
//     flex: 0 0 100%;
//     max-width: 100%;
//     border-right: none;
//     border-bottom: 1px solid rgba(0, 0, 0, 10%);
//   }

//   .rightPanel {
//     height: 60vh;
//     flex: 0 0 100%;
//     max-width: 100%;
//   }

//   .toolbar {
//     padding: 12px 16px;
//     flex-direction: column;
//     align-items: flex-start;
//     gap: 8px;
//   }

//   .toolbarLeft {
//     width: 100%;
//   }

//   .toolbarRight {
//     width: 100%;
//     justify-content: flex-end;
//   }

//   .contentRow {
//     flex-direction: column;
//     height: 100%;
//   }

//   .editorCol {
//     height: calc(60vh - 200px);
//     flex: 1;
//     min-height: 300px; // 确保最小高度
//     min-width: 0;
//   }

//   // 编辑器头部响应式样式 - 防止换行
//   .editorHeader {
//     padding: 8px 12px;
//     flex-wrap: nowrap;
//     min-height: auto;
//   }

//   .editorHeaderLeft {
//     flex-shrink: 0;
//     min-width: 0;
//   }

//   .editorHeaderRight {
//     flex-shrink: 0;
//     min-width: 0;
//   }

//   // Segmented组件响应式样式
//   .segmentedTabs {
//     :global(.ant-segmented) {
//       font-size: 12px;
//     }
//   }
// }

// 部署遮罩样式
.deployOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 30%);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.3s ease-out;
}

.deployOverlayContent {
  background: rgba(255, 255, 255, 95%);
  border-radius: 12px;
  padding: 32px 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 20%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 280px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 20%);
}

.deploySpinner {
  font-size: 32px;
  color: #1890ff;
  animation: spin 1s linear infinite;
}

.deployText {
  text-align: center;
  color: #1e293b;
}

.deployTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e293b;
}

.deploySubtitle {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

// 动画效果
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 暗色主题支持
[data-theme='dark'] {
  .appDev {
    background: var(--xagi-color-bg-layout);
    color: #fff;
  }

  .toolbar {
    background: var(--xagi-color-bg-container);
    border-bottom-color: var(--xagi-color-border);
  }

  .sider {
    background: var(--xagi-color-bg-container);
    border-right-color: var(--xagi-color-border);
  }

  .siderHeader {
    background: var(--xagi-color-fill-quaternary);
    border-bottom-color: var(--xagi-color-border);
  }

  .content {
    background: var(--xagi-color-bg-container);
  }

  // 暗色主题下的部署遮罩样式
  .deployOverlayContent {
    background: rgba(30, 41, 59, 95%);
    border: 1px solid rgba(255, 255, 255, 10%);
  }

  .deployText {
    color: #f1f5f9;
  }

  .deployTitle {
    color: #f1f5f9;
  }

  .deploySubtitle {
    color: #94a3b8;
  }
}
